<template>
  <div class="h287 w100p">
     <div
      class="s-tac s-d-flex s-ai-center s-jc-center h287"
      v-if="dataListShow"
    >
      <div>
        <img
          class="w190 h120"
          src="@/assets/nodata.png"
          alt=""
        >
        <div
          style="color:#A8A8A8"
          class="fz14"
        >暂无数据</div>
      </div>
    </div>
    <div
    v-else
      class="w100p h287"
      id="fifteenDepart"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import * as statisticsApi from "@/api/statistics";
import { getUserInfo } from "@/utils/auth";
export default {
  data() {
    return {
      dataForm: {
        time: "",
      },
      dataListShow:false
    };
  },
  mounted() {
    // let userInfo = getUserInfo() ? JSON.parse(getUserInfo()) : {};
    // if (userInfo.type != "admin") {
    //   this.handleInit();
    // }
  },
  methods: {
    handleInit(_row) {
      let params = _row;
      statisticsApi.fifteenDepart(params).then((res) => {
        if (res && res.success) {
          if(res.data && res.data.length != 0) {
            this.dataListShow = false
          } else {
            this.dataListShow = true
          }
          let name = res.data.map((item) => {
            return item.departName;
          });
          let data = res.data.map((item) => {
            return item.count;
          });
          let myChart = echarts.init(document.getElementById("fifteenDepart"));
          let option = {
            grid: {
              top: "8%",
              left: "3%",
              right: "3%",
              bottom: "10%",
              // containLabel: true
            },
            xAxis: [
              {
                type: "category",
                color: "#59588D",
                axisLine: {
                  show: true,
                },
                axisLabel: {
                  color: "#282828",
                },
                splitLine: {
                  // show: true
                },

                axisTick: {
                  show: false,
                },
                // boundaryGap: true,
                data: name,
              },
            ],
            yAxis: {
              type: "value",
              min: 0,
              splitNumber: 4,
              splitLine: {
                show: true,
              },
              axisLine: {
                show: true,
              },
              axisLabel: {
                show: true,
                // margin: 20,
                textStyle: {
                  color: "#737373",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(131,101,101,0.2)",
                  type: "dashed",
                },
              },
            },
            series: [
              {
                type: "bar",
                barWidth: 50,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#06a4f4",
                        },
                        {
                          offset: 1,
                          color: "#06a4f4",
                        },
                      ],
                      false
                    ),
                  },
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 16,
                    color: "#919191",
                    position: "top",
                  },
                },
                data: data,
              },
            ],
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        }
      });
    },
  },
};
</script>